﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExtraCommissions.aspx.cs" Inherits="OptusMobile.Web.Plan.ExtraCommissions" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head id="Head1" runat="server">
		<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"/>
		<meta http-equiv="X-UA-Compatible" content="IE=8"/>
		<meta name="author" content="Wang Yiyao"/>
		<meta name="description" content="Optus is an Australian leader in integrated telecommunications, delivering cutting-edge communications, information technology and entertainment services."/>
		<meta name="keywords" content="optus, telecommunications, home, prepaid, mobile, phone, broadband, internet, technology "/>
		<meta name="site" content="personal"/>
		<meta name="channel" content="OCAHome|Personal"/>

		<meta http-equiv="imagetoolbar" content="no"/> <!-- disable the image menu that appears in IE -->
		
		<title>Optus Telecommunications. Phone, Mobile and Internet.</title>
		
		<!-- use Google's jQuery content servers since it can provide compressed HTTP responses -->
		<!-- jQuery Library has to be located before call to iepngfix in core.css -->
		
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="Plan/Test.css" media="all"/>

				<!--<link rel="stylesheet" type="text/css" href="assets/lib/css/personal.css" media="all">-->
				
		<!-- JS libraries 
				<script type="text/javascript" src="assets/lib/js/shared.js"></script>-->
				<%--[if lte IE 6]><![endif]--%>
		<script type="text/javascript">
		    var imgwidth = 240; //宽
		    var imgheight = 210; //高
		    var _timeOut_ = 5000; //过渡时间
		    var show_text = true; //是否显示焦点文字
		    var timeOut = _timeOut_;
		    var timeOut2 = _timeOut_ / 2; //onmouseout img后需要切换的时间
		    var now = 0;                //第一张图
		    var target = "_blank";     //打开方式
		    var button_on = 'on'; //当前焦点对应按钮的样式名
		    var button_off = ''; //非当前焦点对应按钮的样式名
		    //不可修改区域
		    var imgUrl = new Array();
		    var imgText = new Array();
		    var imgLink = new Array();
		    var imgAlt = new Array();
		    //var menuList = new Array();//菜单menu
		    var ver = 2; //兼容浏览器版本 默认2 为非ie
		    var firstTime = true;
		    var n = -1;


		    imgUrl[++n] = 'Image/Common/banner_1.gif';
		    imgText[n] = '<a href="http://#" target="_blank" class="linkblack">图片名称1</a>';
		    imgLink[n] = 'http://#';
		    imgAlt[n] = '图片名称1';

		    imgUrl[++n] = 'Image/Common/banner_2.jpg';
		    imgText[n] = '<a href="http://#" target="_blank" class="linkblack">图片名称2</a>';
		    imgLink[n] = 'http://idc.yovole.com';
		    imgAlt[n] = '图片名称2';

		    imgUrl[++n] = 'Image/Common/banner_3.jpg';
		    imgText[n] = '<a href="http://#" target="_blank" class="linkblack">图片名称3</a>';
		    imgLink[n] = 'http://#';
		    imgAlt[n] = '图片名称3';

		    var count = 0;
		    for (i = 0; i < imgUrl.length; i++) {
		        if ((imgUrl[i] != "") && (imgText[i] != "") && (imgLink[i] != "") && (imgAlt[i] != "")) {
		            count++;
		        } else {
		            break;
		        }
		    }
		    function p$(string) {
		        document.write(string);
		    }
		    function $(id) {
		        return document.getElementById(id);
		    }
		    //固定图片size
		    p$("<style> #f_img { width:" + imgwidth + "px;height:" + imgheight + "px;</style>");
		    function change() {
		        if (ver == 1) {
		            with ($('f_img').filters[0]) {
		                Transition = 1;
		                apply();
		                play();
		            }
		        }
		        if (firstTime) { firstTime = false; timeOut = _timeOut_ / 1000; }
		        else {
		            $('f_img').src = imgUrl[now];
		            $('f_img').alt = imgAlt[now];
		            $('f_imgLink').href = imgLink[now];
		            for (var i = 0; i < count; i++) {
		                $('b' + i).className = "button";
		                //$('f_menu'+i).className="";
		            }
		            $('b' + now).className = "on";
		            //$('f_menu'+now).className="on";
		            now = (now >= imgUrl.length - 1) ? 0 : now + 1;
		            timeOut = _timeOut_;
		        }
		        theTimer = setTimeout("change()", timeOut);
		    }
		    function b_change(num) {
		        window.clearInterval(theTimer);
		        now = num;
		        firstTime = false;
		        change();
		    }
		    //draw 渐变line （即css:f_line)
		    function draw_line() {
		        var div = document.createElement("div");
		        div.id = 'f_line';
		        $('f_infodiv').insertBefore(div, $('f_infodiv').childNodes.item(0));
		    }
		    //表现层 start
		    //图片
		    var a = document.createElement("a");
		    a.id = "f_imgLink";
		    a.target = target;
		    a.href = imgLink[now];
		    $('f_imgdiv').appendChild(a);

		    var img = document.createElement("img");
		    img.id = "f_img";
		    img.width = imgwidth;
		    img.height = imgheight;
		    img.src = imgUrl[now];
		    img.alt = imgAlt[now];
		    var imgarea = document.getElementById("imgare");
		    imgarea.appendChild(img);
//		    a.appendChild(img);

		    //数字按钮
//		    for (var i = count - 1; i >= 0; i--) {
//		        var div_bg = document.createElement("div");
//		        div_bg.id = 'div_bg' + i;
//		        div_bg.className = 'bg';
//		        $('f_buttondiv').appendChild(div_bg);
//		        var a = document.createElement("a");
//		        a.id = 'b' + i;
//		        a.className = (i == now + 1) ? "button_on" : "button_off";
//		        a.title = imgAlt[i];
//		        a.innerHTML = i + 1;
//		        a.href = 'javascript:b_change(' + i + ')';
//		        $('div_bg' + i).appendChild(a);
//		        var div = document.createElement("div");
//		        $('f_buttondiv').appendChild(div);
//		    }
		    //表现层 end
		    $('f_img').onmouseover = function() { window.clearInterval(theTimer); }
		    $('f_img').onmouseout = function() { theTimer = setTimeout("change()", timeOut2); }
		    try {    //滤镜版本
		        new ActiveXObject("DXImageTransform.Microsoft.Fade");
		        $('f_img').filters[0].play();
		        ver = 1;
		        draw_line();
		    }
		    catch (e) { ver = 2; }
		    var theTimer = setTimeout("change()", _timeOut_ / 1000);

		</script>
		
	</head>
	<body>
		<!--
			Start the Homepage's boot sector. :-)
		-->
		<form id="form1" runat="server">
		<div id=f_div><!--图片区域-->
              <div id=f_imgdiv></div>
              <div id=f_infodiv><!--数字按钮区域-->
              <div id=f_buttondiv></div></div></div>

		<div class="top_layer">				
				<a href="//www.optus.com.au"><img alt="'yes' Optus logo" title="'yes' Optus logo" src="../Image/Common/logo-yes-optus.gif"/></a>
				<a href="//www.optus.com.au"><img alt="'yes' Optus logo" title="'yes' Optus logo" src="../Image/Common/top2.jpg"/></a>
				<div class="primary_nav">
					<ul>
						<li><a href="../Default.aspx">Home</a></li>
						<li class="menuDiv"></li>
						<li><a href="Handset/AllHandsetShow.aspx">Mobile</a></li>
						<li class="menuDiv"></li>
						<li><a id="long" href="Handset/ShowAllPlan.aspx">Plan Detail</a></li>
						<li class="menuDiv"></li>
						<li><a id="long">Broadband</a></li>
						<li class="menuDiv"></li>
						<li><a>Bundles</a></li>
						<li class="menuDiv"></li>
						<li><a href="offers/">Offers</a></li>
						<li class="menuDiv"></li>
						<li><a id="long">Customer Centre</a></li>
						<li class="menuDiv"></li>
						<li><a id="long" href="https://personal.optus.com.au/web/oscportal.portal?site=personal">
						My Account</a></li>
						<li class="menuDiv"></li>
						<li><a id="long" href="//personal.optus.com.au/web/ocaportal.portal?_nfpb=true&amp;_pageLabel=shoppingcart&amp;site=personal&amp;FP=/personal/shoppingcart">
						View Cart</a></li>
					</ul>
			</div>
	</div>
	<div class="main_div">
		<div class="show">
			<!--<ul>
				<li><img src="Optus Mobile/banner_1.gif" id="a" alt="plan1">
				</li>	
				<li><img src="Optus Mobile/banner_2.jpg" id="b" alt="plan2">
			    </li>
	     	    <li><img src="Optus Mobile/banner_3.jpg" id="c" alt="plan3">
		        </li>
			    <li><img src="Optus Mobile/banner_4.jpg" id="d" alt="plan4">
			    </li>	
			</ul>-->
			<ul>
				<li id="imgare">
					<%--<img class="imagePlan" src="../Image/Common/banner_1.gif" id="a" alt="plan"/>
					<img class="imagePlan" src="../Image/Common/banner_2.jpg" id="b" alt="plan"/>
					<img class="imagePlan" src="../Image/Common/banner_3.jpg" id="c" alt="plan"/>
					<img class="imagePlan" src="../Image/Common/banner_4.jpg"id="d" alt="plan"/>
					<img class="imagePlan" src="../Image/Common/banner_5.jpg" id="e" alt="plan"/>
					<img class="imagePlan" src="Image/Common/banner_5.jpg" id="f" alt="plan"/>--%>


				</li>
			</ul>
		</div>
		<div class="showText">		    
			<ul>	
				<li><a id="tag1" href="#a">120GB for $49.99. Think Bigger.</a></li>
				<li class="menuDiv"></li>
				<li ><a id="tag2" href="#b" onclick="">
							Home Phone + Broadband</a></li>
				<li class="menuDiv"></li>
				<li><a id="tag3" href="#c">
							BYO Phone for More Value!</a></li>
			 	<li class="menuDiv"></li>
				<li><a id="tag4" href="#d">
							2GB of Mobile Broadband for $69</a></li>
				<li class="menuDiv"></li>
				<li><a id="tag5" href="#e">
							Sony Ericsson Vivaz</a></li>
			</ul>
		</div>
		<div class="operator">
			<ul>
				<li>
				<a style="margin-left:95px;font-family:'Georgia&#65292;Times New Roman&#65292;Times&#65292;serif';font-size:medium">My Service</a>
				</li>
				<li>
				<a id="title">phone Number :</a>
                    <asp:TextBox ID="txbPhone" runat="server"></asp:TextBox>
				
				</li>
				<li>
				<a id="title">Password :</a>
                    <asp:TextBox ID="txbPWD" runat="server" class="textarae" 
                        style="margin-left:34px" TextMode="Password">*</asp:TextBox>
				
				</li>
				<li>
				<input name="Checkbox1" type="checkbox"/><a>Remember me nex	t time.</a>
                    <asp:Button ID="btLogin" runat="server" Text="Login"/>
				</li>
				<li>
				</li>
				<li>
					<a style="margin-left:95px;font-family:'Georgia&#65292;Times New Roman&#65292;Times&#65292;serif';font-size:medium">Help Me</a>
				</li>
                <li>
					<a class="recommedbyquestion" href="#">Recommedation handset by questions</a>
				
                
                
                </li>
                <li><a class="recommedbyquestion" href="#" style="margin-left: 24px">Recommedation plan
                    by questions</a> </li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>
